<template>
  <div class="pagenation">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="params.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Pagenation',
  props: {
    params: {
      type: Object,
      default: function () {
        return {}
      }
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {}
  },
  methods: {
    // 监听pagesize改变事件
    handleSizeChange (newsize) {
      console.log(newsize)
      this.$emit('handleSizeChange', newsize)
      console.log(22)
    },
    // 监听页码值改变的事件
    handleCurrentChange (newpage) {
      console.log(33)
      this.$emit('handleCurrentChange', newpage)
      console.log(444)
    }
  }
}
</script>

<style scoped lang='scss'>
.pagenation{
  height: 300px;
  width: 100%;
}
</style>
